import {
  xjfddy,
  jbntbhtb,
  ytgzq,
  tdytq,
  dbfg,
  jbtj,
  yjd
} from "@/api/hzz/statis";
import { list } from '@/api/yxwh/bmgl';
import { poiQXJ } from '@/api/poi'

import echarts from "echarts";
import { read } from "fs";


const hzzSys = {
  namespaced: true,
  state: {
    displayStaticPanelIsShow: true, //统计面板是否显示
    staticsDemoData: { x: [], y: [] },      //示例数据
    aspect: undefined,
    staticsXJFDDY: { x: ['水田', '旱地', '水浇地', '盐碱地', '湿地', '林地', '草地'], y: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6] },
    staticsYTGZQ: { x: ['限制建设区', '有条件建设区', '允许建设区'], y: [{ name: '限制建设区', value: 11254 }, { name: '有条件建设区', value: 21541 }, { name: '允许建设区', value: 65541 }] },
    staticsTDYTQ: { x: ['一般农用地', '其他用地区', '城镇建设区', '特殊通用地', '规划建设区'], y: [820, 932, 901, 934, 1290] },
    staticsJBNTBHTB: { x: [], y: [] },
    staticsDBFG: {
      x: ['水田', '旱地', '果园', '林地', '草地', '裸地', '其他'], y: [[320, 332, 301, 334, 390, 12, 44], [220, 182, 191, 234, 290, 45, 898],
      [150, 232, 201, 154, 190, 34, 458], [98, 77, 101, 99, 40, 223, 454]], z: ['2015', '2016', '2017', '2018']
    },
    staticsJBTJ: [],
    districts: undefined,
    tree1: { name: "", children: [] }
  },
  mutations: {
    //设置统计面板是否显示
    SET_STATICSDEMODATA: (state, obj) => {
      state.staticsDemoData = obj;
    },

    SET_ASPECT: (state, obj) => {
      state.aspect = obj;
    },

    SET_STATICSXJFDDY: (state, obj) => {
      state.staticsXJFDDY = obj;
    },

    SET_STATICSYTGZQ: (state, obj) => {
      state.staticsYTGZQ = obj;
    },

    SET_STATICSTDYTQ: (state, obj) => {
      state.staticsTDYTQ = obj;
    },

    SET_STATICSJBNTBHTB: (state, obj) => {
      state.staticsJBNTBHTB = obj;
    },

    SET_DISPLAYSTATICPANELISSHOW: (state, obj) => {
      state.displayStaticPanelIsShow = obj;
    },

    SET_DISTRICTS: (state, obj) => {
      state.districts = obj;
    },

    SET_STATICSDBFG: (state, obj) => {
      state.staticsDBFG = obj;
    },
    SET_STATICSJBTJ: (state, obj) => {
      state.staticsJBTJ = obj;
    },

  },
  getters: {
//右侧大屏第一统计图表(圈状图-建设用途管制区)
A(state) {
  return {
    color: [
      "#005850",
      "#00918A",
      "#09B0AC",
      "#A1DC00",
      "#FBFE00",
      "#F8C929",
      "#FD8207",
      "#FB2502"
    ],
    legend: {
      type: "scroll",
      orient: "vartical",
      x: "left",
      top: "center",
      left: "60%",
      bottom: "5%",
      data: state.staticsYTGZQ.x,
      itemWidth: 7,
      itemHeight: 8,
      itemGap: 10,
      formatter: function (name) {
        return "" + name;
      },
      textStyle: {
        fontSize: 12, // 字体大小
        color: "#fff" // 字体颜色
      }
    },
    series: [{
      type: "pie",
      clockwise: false, // 饼图的扇区是否是顺时针排布
      minAngle: 0, // 最小的扇区角度（0 ~ 360）
      radius: ["50%", "70%"],
      center: ["30%", "40%"],
      avoidLabelOverlap: false,
      itemStyle: {
        // 图形样式
        normal: {
          borderColor: "#ffffff",
          borderWidth: 0
        }
      },
      label: {
        normal: {
          show: false,
          position: "center",
          formatter: "{text|{b}}\n{c} 万k㎡ ({d}%)",
          rich: {
            text: {
              color: "#fff",
              fontSize: 12,
              align: "center",
              verticalAlign: "middle",
              padding: 8
            },
            value: {
              color: "#09B0AC",
              fontSize: 12,
              align: "center",
              verticalAlign: "middle"
            }
          }
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: 12
          }
        }
      },
      data: state.staticsYTGZQ.y
    }]
  };
},
//右侧大屏第二个统计图表（线状图-土地用途区）
B(state) {
  return {
    // title: {
    //     text: '堆叠区域图'
    // },
    tooltip: {
      trigger: 'axis',
      formatter: "{b}\n{c} 万k㎡",
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },

    grid: {
      left: '1%',
      right: '10%',
      bottom: '1%',
      top: '5%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: state.staticsTDYTQ.x,
        axisLabel: {
          textStyle: {
            color: "#fff"
          },
          show: true,
          interval: 0,    // {number}
          rotate: 45,
          margin: 8,
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: "图斑面积",
        type: "line",
        color: "rgba(23, 255, 243)",
        smooth: true,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
              [
                {
                  offset: 0,
                  color: "rgba(23, 255, 243, 0.8)"
                },
                {
                  offset: 0.8,
                  color: "rgba(23, 255, 243, 0)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.4)",
            shadowBlur: 10
          }
        },
        symbol: "circle",
        symbolSize: 15,
        data: state.staticsTDYTQ.y
      }
    ]
  };
},
//右侧大屏第三个统计图表(柱状图-县级分等单元 )
C(state) {
  return {
    color: ["#FD8207", "#FB2502", "#005850",
      "#00918A",
      "#09B0AC",
      "#A1DC00",
      "#FBFE00",
      "#F8C929",
    ],
    tooltip: {
      trigger: 'axis',
      formatter: "{b}\n{c} 万k㎡",
    },
    grid: {
      left: '1%',
      right: '10%',
      bottom: '1%',
      top: '5%',
      containLabel: true
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: state.staticsXJFDDY.x,
        axisLabel: {
          textStyle: {
            color: "#fff"
          },
          show: true,
          interval: 0,    // {number}
          rotate: 45,
          margin: 8,
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '面积',
        type: 'bar',
        data: state.staticsXJFDDY.y,
        // markPoint: {
        //   data: [
        //     { type: 'max', name: '最大值' },
        //     { type: 'min', name: '最小值' }
        //   ]
        // },
        // markLine: {
        //   data: [
        //     { type: 'average', name: '平均值' }
        //   ]
        // }
      }
    ]
  };

},
//右侧大屏第四个统计图表（雷达图-基本农田）
D(state) {
  return {
    dataset: {
      source: [
        ['score', 'amount', 'product'],
        [89.3, 58212, 'Matcha Latte'],
        [57.1, 78254, 'Milk Tea'],
        [74.4, 41032, 'Cheese Cocoa'],
        [50.1, 12755, 'Cheese Brownie'],
        [89.7, 20145, 'Matcha Cocoa'],
        [68.1, 79146, 'Tea'],
        [19.6, 91852, 'Orange Juice'],
        [10.6, 101852, 'Lemon Juice'],
        [32.7, 20112, 'Walnut Brownie']
      ]
    },

    grid: {
      containLabel: true,
      left: '1%',
      right: '10%',
      bottom: '5%',
      top: '5%',
    },
    xAxis: { name: 'amount' },
    yAxis: { type: 'category' },
    visualMap: {
      orient: 'horizontal',
      left: 'center',
      min: 10,
      max: 100,
      text: ['High Score', 'Low Score'],
      // Map the score column to color
      dimension: 0,
      inRange: {
        color: ["#FD8207", "#FB2502", "#005850",
          "#00918A",
          "#09B0AC",
          "#A1DC00",
          "#FBFE00",
          "#F8C929",]
      }
    },
    series: [
      {
        type: 'bar',
        encode: {
          // Map the "amount" column to X axis.
          x: 'amount',
          // Map the "product" column to Y axis
          y: 'product'
        }
      }
    ]
  }
},
//
E(state) {
  return {
    tooltip: {},
    radar: {
      // shape: 'circle',
      name: {
        textStyle: {
          color: '#fff',
          backgroundColor: '#999',
          borderRadius: 3,
          padding: [3, 5]
        }
      },

      indicator: [
        { name: '种植土地', max: 6500 },
        { name: '林草覆盖', max: 16000 },
        { name: '荒漠', max: 30000 },
        { name: '居民地', max: 38000 },
        { name: '湖泊', max: 52000 },
        { name: '山', max: 25000 }
      ]
    },
    series: [{
      name: '地表覆盖',
      type: 'radar',
      // areaStyle: {normal: {}},
      data: [
        {
          value: [4300, 10000, 28000, 35000, 50000, 19000],
          name: '地表覆盖'
        }
      ]
    }]
  };
},
//左侧倒数第一个统计图表
F(state) {
  if (state.districts)
    echarts.util.each(state.districts.children, function (datum, index) {
      (datum.collapsed = true);
    });

  return {
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
    },
    series: [
      {
        type: 'tree',
        data: [state.districts ? state.districts : state.tree1],
        top: '5%',
        left: '28%',
        bottom: '5%',
        right: '5%',
        symbolSize: 15,
        // orient: 'HR',
        itemStyle: {
          borderColor: '#3eb1e3',
          borderWidth: 4
        },
        label: {
          normal: {
            position: 'left',
            verticalAlign: 'middle',
            align: 'right',
            fontSize: 15,
            color: '#fff'
          }

        },
        // leaves: {
        //   label: {
        //     position: 'right',
        //     verticalAlign: 'middle',
        //     align: 'left'
        //   }
        // },
        expandAndCollapse: true,
        animationDuration: 550,
        animationDurationUpdate: 750
      }
    ]
  }
},
//左侧倒数第二个统计图表（地表覆盖）
G(state) {
  var labelOption = {
    normal: {
      show: true,
      position: 'insideBottom',
      distance: 15,
      align: 'left',
      verticalAlign: 'middle',
      rotate: 90,
      formatter: '{c}  {name|{a}}',
      fontSize: 5

    }
  };

  var item = state.staticsDBFG.z.map((l, i, a) => {
    return {
      name: l,
      type: 'bar',
      barGap: 0,
      // label: labelOption,
      data: state.staticsDBFG.y[i]
    }
  })

  return {
    grid: {
      left: '1%',
      right: '1%',
      bottom: '5%',
      top: '15%',
      containLabel: true
    },
    color: ["#FB2502", "#005850", "#09B0AC", "#FBFE00"],
    tooltip: {
      trigger: 'axis',
      formatter: "{b}\n{c} 万k㎡",
      formatter:function(params,tickect,callback){
        var title=params[0]['name']+"(面积占比)<br/>";
        for(var i =0;i<params.length;i++){
          title = title+params[i]['seriesName'] +"\n\n\n\n\n\n\n"+(params[i]['data']*100).toFixed(2)+"%<br/>";
        }
        return title;
      },
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: state.staticsDBFG.z,
      textStyle: {
        color: '#fff'
      }
    },

    calculable: true,
    xAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        axisLabel: {
          textStyle: {
            color: '#fff'
          },
          show: true,
          interval: 0,    // {number}
          rotate: 45,
          margin: 8,
        },
        data: state.staticsDBFG.x
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          textStyle: {
            color: '#fff'
          },
        },
      }
    ],
    series: item
  }
},
//第一级行政区代码
T(state) {
  return state.districts ? state.districts.XZQDM : undefined
},
//右侧最后的一个统计图表（饼状图-基本农田）
H(state) {
  return {
    color: ["#FD8207", "#FB2502", "#005850",
      "#00918A",
      "#09B0AC",
      "#A1DC00",
      "#FBFE00",
      "#F8C929",

    ],
    tooltip: {
      trigger: 'item',
      
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // legend: {
    //     orient: 'horizontal',
    //     left: 'left',
    //     data: state.staticsJBNTBHTB.x
    // },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: 10,
      top: 20,
      bottom: 20,
      data: state.staticsJBNTBHTB.x
    },
    series: [
      {
        name: '基本农田波保护图斑(平方公里)',
        type: 'pie',
        radius: '55%',
        center: ['30%', '60%'],
        data: state.staticsJBNTBHTB.y,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
}
  },

  actions: {
    //县级等分单元
    XJFDDY({ commit, state }, params) {
      // yjd().then(res => {
      //   const result = res.data;
      //   console.log(result);
      //   console.log(params)
      //   let dt = result.filter(rs => {
      //     return rs.xzqdm === params.xzbm.toString();
      //   })

      //   let yjdxzqs = [];
      //   if (dt[0] && dt[0].children) {
      //     dt[0].children.forEach(ele => {
      //       result.forEach(re => {
      //         if (ele === re._id) {
      //           yjdxzqs.push(re);
      //         }
      //       })
      //     });
      //   }
        
      //   console.log(yjdxzqs);
      //   commit('SET_STATICSXJFDDY', { x: yjdxzqs.map(r => r.xzqname), y: yjdxzqs.map(r => parseFloat(r.mj)) })
      // })
      xjfddy(params).then(res => {
        const result = res.data;
        commit('SET_STATICSXJFDDY', { x: result.map(r => r.name), y: result.map(r => r.value) })
      })
      
    },
    //用途管制区
    YTGZQ({ commit, state }, params) {
      ytgzq(params).then(res => {
        const result = res.data;
        commit('SET_STATICSTDYTQ', { x: result.map(r => r.name), y: result.map(r => r.value) })
      })
    },
    //土地用途区
    TDYTQ({ commit, state }, params) {
      tdytq(params).then(res => {
        const result = res.data;
        commit('SET_STATICSYTGZQ', { x: result.map(r => r.name), y: result });
      })
    },
    //基本农田
    JBNTBHTB({ commit, state }, params) {
      jbntbhtb(params).then(res => {
        const result = res.data;
        commit('SET_STATICSJBNTBHTB', { x: result.map(r => r.name), y: result });
      })
    },
    //地表覆盖
    DBFG({ commit, state }, params) {
      dbfg(params).then(res => {
        const result = res.data;
        commit('SET_STATICSDBFG', { x: result[0].zb.map(r => Object.keys(r)[0]), y: result.map(r => r.zb.map(i => { return Object.values(i)[0] })), z: result.map(r => { return r.year }) });
      })
    },

    //行政区
    DISTRICTS({ commit, state }, parmas) {
      return new Promise((resolve, reject) => {
        list(parmas).then(res => {
          commit('SET_DISTRICTS', (res.data.length > 0 && res.data[0].name == "ROOT") ? res.data[0].children[0] : res.data[0]);
          resolve(state.districts.XZQDM);
        })
      })

    },

    //行政区
    QXJ({ commit, state }, parmas) {
      return new Promise((resolve, reject) => {
        poiQXJ(parmas).then(res => {
          resolve(res);
        }).catch(e => {
          reject(e);
        })
      })

    },
    //基本统计
    JBTJ({ commit, state }, parmas) {
      return new Promise((resolve, reject) => {
        jbtj(parmas).then(res => {
          commit('SET_STATICSJBTJ', res.data)
          resolve(res);
        }).catch(e => {
          reject(e);
        })
      })

    },




  }

}

export default hzzSys
